<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Goods</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiAdmin.std/src/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiAdmin.std/src/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-table-img {
            max-width: 100px;       /* 限制图片最大宽度 */
            max-height: 80px;      /* 限制图片最大高度 */
            border-radius: 4px;    /* 圆角处理 */
            cursor: pointer;       /* 鼠标悬停样式 */
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="TableList" lay-filter="TableList"></table>
            <script type="text/html" id="imgTpl">
                <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
            </script>
            <script type="text/html" id="tools">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>
<script src="/static/layuiAdmin.std/src/layuiadmin/layui/layui.js"></script>
<script>
    var $;
    var form;
    var table;



    function del_batch() {
        var checkStatus = table.checkStatus('TableList')
        var checkData = checkStatus.data;
        if(checkData.length === 0){
            return layer.msg('请选择数据');
        }
        var ids = [];
        for (var i = 0; i < checkData.length; i++) {
            ids.push(checkData[i].id);
        }
        del(ids.join(','))
    }

    function del(ids) {
        layer.confirm('确定删除吗？', function(index) {
            $.ajax({
                url: 'del_spec',
                type: 'POST',
                data: {
                    ids: ids
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == '0') {
                        layer.msg('删除成功', { icon: 1, time: 1000 }, function () {
                            location.reload()
                        });
                    } else {
                        layer.msg(data.msg, { icon: 5, time: 2000 });
                    }
                }
            });
        });
    }

    layui.config({
        base: '/static/layuiAdmin.std/src/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table'], function(){
        $ = layui.$
        form = layui.form
        table = layui.table;

        table.render({
            elem: '#TableList'
            ,url: 'spec_list_list'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', width: 100, title: 'Id', sort: true}
                ,{field: 'spec_name', title: '规格'}
                ,{field: 'price', title: '价格', edit: 'text'}
                ,{field: 'stock_num', title: '库存', edit: 'text'}
                ,{title: '操作', align:'center', fixed: 'right', toolbar: '#tools'}
            ]]
            ,page: true
            ,limit: 50
            ,height: 'full-100'
            ,text: '对不起，加载出现异常！'
        });

        table.on('tool(TableList)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                del(obj.data.id)
            }
        });

        //监听单元格编辑
        table.on('edit(TableList)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            // layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value, {
            //     offset: '15px'
            // });

            $.ajax({
                url: 'update_spec_value',
                type: 'POST',
                data: {
                    id: data.id,
                    field: obj.field,
                    value: obj.value
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == '0') {
                        layer.msg('更新成功', { icon: 1, time: 1000 }, function () {
                            //location.reload()
                        });
                    } else {
                        layer.msg(data.msg, { icon: 5, time: 2000 });
                    }
                }
            });
        });

        form.on('submit(btn-search)', function(data){
            var field = data.field;
            table.reload('TableList', {
                where: field
            });
        });
    });
</script>
</body>
</html>
